<!--
 * @Date: 2019-11-11 10:48:37
 * @LastEditors  : Vi卡农
 * @LastEditTime : 2020-01-13 10:59:20
 * @describe: -楼盘字典列表-
 -->
<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <div class="mod-dictionary__dictinfo}">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-row>
          <el-col :span="18">
            <el-form-item>
              面积：
              <el-input
                v-model="dataForm.areas"
                placeholder="最小"
                class="Section_inp"
              ></el-input>
              {{' -'}}
              <el-input
                v-model="dataForm.areae"
                placeholder="最大"
                class="Section_inp"
              ></el-input>
            </el-form-item>
            <el-form-item>
              出租价格：
              <el-input
                v-model="dataForm.leasePrices"
                placeholder="最低价"
                class="Section_inp"
              ></el-input>
              {{' -'}}
              <el-input
                v-model="dataForm.leasePricee"
                placeholder="最高价"
                class="Section_inp"
              ></el-input>
            </el-form-item>

            <el-form-item>
              出售价格：
              <el-input
                v-model="dataForm.sellPrices"
                placeholder="最低价"
                class="Section_inp"
              ></el-input>
              {{' -'}}
              <el-input
                v-model="dataForm.sellPricee"
                placeholder="最高价"
                class="Section_inp"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item>
                查看来源：
                <el-select v-model="dataForm.self" style="width:100px">
                    <el-option label="所有" value="1"></el-option>
                    <el-option label="个人" value="0"></el-option>
                </el-select>
                        </el-form-item>-->
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请输入内容"
              v-model="dataForm.name"
              class="input-with-select"
            >
              <el-select
                v-model="select_type"
                slot="prepend"
                style="width:100px;"
              >
                <el-option
                  label="楼盘名"
                  value="1"
                ></el-option>
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              物业类型：
              <ren-select
                v-model="dataForm.type"
                dict-type="dictType"
                placeholder="物业类型"
              ></ren-select>
            </el-form-item>
            <el-form-item>
              区域：
              <el-select
                v-model="dataForm.districtCode"
                placeholder="请选择"
                clearable
                @change="CityRegionChange"
              >
                <el-option
                  v-for="item in this.$store.state.CityRegion"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              商圈：
              <el-select
                v-model="dataForm.business"
                placeholder="请选择"
                :disabled="dataForm.districtCode==''"
              >
                <el-option
                  v-for="item in businessList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              地铁线路：
              <el-select
                v-model="dataForm.metroId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in this.$store.state.MetroPage"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="MetroPageChange(item)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              站点：
              <el-select
                v-model="dataForm.stationId"
                placeholder="请选择"
                :disabled="dataForm.metroId==''"
              >
                <el-option
                  v-for="item in metrostationList"
                  :key="item.stationId"
                  :label="item.stationName"
                  :value="item.stationId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-button @click="Reset">重置</el-button>
            <el-form-item style="margin-left:20px;">
              <el-button
                v-if="$hasPermission('dictionary:dictinfo:maintain')"
                type="primary"
                @click="dictinfoMaintain"
              >维护</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        style="width: 100%;"
        @row-dblclick="details"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="编号"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{"LP - "+scope.row.id.substring(scope.row.id.length-6)}}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="楼盘名称"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span class="font_weight">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="楼盘类型"
          header-align="center"
          align="center"
        >
          <!-- <template slot-scope="scope">{{ $getDictLabel("dictType", scope.row.type) }}</template> -->
          <template slot-scope="scope">
            <span :style="dictTypeColor(scope.row.type)">
              {{ $getDictLabel("dictType", scope.row.type) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="districtCode"
          label="商圈区域"
          header-align="center"
          align="center"
          width="130"
        >
          <template slot-scope="scope">{{ $Dictionaries("CityRegion", scope.row.districtCode) }} {{ $Dictionaries("BusinessPage", scope.row.business) }}</template>
        </el-table-column>
        <el-table-column
          prop="areas"
          label="面积区间（㎡）"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{scope.row.areas}} - {{scope.row.areae}}</template>
        </el-table-column>
        <el-table-column
          prop="sellPrices"
          label="价格区间（元/月）"
          header-align="center"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            {{scope.row.prices}} - {{scope.row.pricee}}
          </template>
        </el-table-column>
        
        <el-table-column
          prop="propertyPrice"
          label="物业费（元/㎡/月）"
          header-align="center"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="maintainName"
          label="维护人"
          header-align="center"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="deptName"
          label="部门"
          header-align="center"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          header-align="center"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="RoomDictionary(scope.row)"
            >字典</el-button>
            <!-- <el-button
              type="text"
              size="small"
              @click="details(scope.row.id)"
            >详情</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="ZWbox"></div>
      <div class="paginationBox">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      ></el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
// import AddOrUpdate from "./dictinfo-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/dictionary/dictinfo/page",
        getDataListIsPage: true,
        exportURL: "/dictionary/dictinfo/export",
        deleteURL: "/dictionary/dictinfo",
        deleteIsBatch: true
      },
      dataForm: {
        name: "",
        type: "",
        examine: "",
        districtCode: "",
        business: "",
        sellPrices: "",
        sellPricee: "",
        leasePrices: "",
        leasePricee: "",
        areas: "",
        areae: "",
        self: "1",
        metroId: "",
        stationId: ""
      },
      // CityRegion: this.$store.state.CityRegion,
      // BusinessPage: this.$store.state.BusinessPage,
      select_type: "1",
      businessList: this.$store.state.BusinessPage,
      metrostationList: [] //地铁站点列表
    };
  },
  created() {},
  mounted() {
  },
  methods: {
    Reset() {
      this.dataForm = {
        name: "",
        type: "",
        examine: "",
        districtCode: "",
        business: "",
        sellPrices: "",
        sellPricee: "",
        leasePrices: "",
        leasePricee: "",
        areas: "",
        areae: "",
        self: "1",
        metroId: "",
        stationId: ""
      };
    },
    RoomDictionary(row) {
      sessionStorage.setItem("MaintainType", "false");
      this.$router.push({
        name: "BuildingDictionaries",
        query: { ID: row.id, name: row.name }
      });
    },
    details(row) {
      let _this = this;
      sessionStorage.setItem("MaintainType", "false");
      this.$router.push({
        name: "BuildingDetails",
        query: { ID: row.id }
      });
    },
    dictinfoMaintain() {
      let _this = this;
      this.$router.push({
        name: "dictinfoMaintain"
      });
    },
    //行政区选择change
    CityRegionChange(val) {
      this.businessList = [];
      this.dataForm.business = "";
      this.$http
        .get(`/dictionary/business/businessList`, {
          params: {
            districtCode: val
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.businessList = res.data;
        })
        .catch(() => {});
    },
    //地铁线路选择change
    MetroPageChange(item) {
      if (item.metroStation.length > 0) {
        this.metrostationList = item.metroStation;
      } else {
        this.metrostationList = [];
        this.dataForm.stationId = "";
      }
    },
    // //行双击
    // tableRowDbclick(row) {
    //   if (this.MaintainType == true) {
    //     sessionStorage.setItem("MaintainType", "true");
    //   } else {
    //     sessionStorage.setItem("MaintainType", "false");
    //   }
    //   this.$router.push({
    //     name: "HousingPages",
    //     query: {
    //       ID: row.id,
    //       transactionType: row.transactionType,
    //       type: row.type
    //     }
    //   });
    // }
  },
  watch: {
    dataForm: {
      handler(nowVal, oldVal) {
        let _this = this;
        _this.getDataList();
      },
      deep: true
    }
  }
};
</script>
